●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Drag-and-drop form composition using MudDropContainer and MudDropZone prototypes and real controls.
- Toolbox (draggable prototypes + non-draggable library) in a left MudDrawer.
- Central canvas with rows/columns, inline add/remove column/row controls and a preview mode.
- Right-hand properties drawer to edit form, row, column and control properties.
- Control prototypes for Text, Number, Checkbox, Date, FileUpload, Button, Slider, Chart, DataGrid, Image and Container.
- Container controls with tabs (MudTabs) and plain expandable containers (MudExpansionPanel).
- JSON export/import modal for saving and loading the form model.
- Simple preview render using MudTextField, MudNumericField, MudCheckBox, MudFileUpload, MudChart, MudDataGrid and MudImage.
- Theme toggle and internal page state management.
## Key components
- MudDropContainer, MudDropZone, MudPaper, MudDrawer
- MudTabs, MudTabPanel, MudExpansionPanels, MudExpansionPanel
- MudTextField, MudNumericField, MudCheckBox, MudFileUpload, MudSlider
- MudButton, MudMenu, MudIconButton, MudToolbar, MudDivider
- MudChart, MudDataGrid, MudImage
- Data models: FormModel, RowModel, ColumnModel, ControlModel, TabModel
## How it works
- The page stores a flat FormModel.Controls list and nested RowModel -> ColumnModel structures; AllItems combines prototypes and live controls for the MudDropContainer.
- Drag-and-drop is handled in OnControlDropped(MudItemDropInfo<ControlModel>) which inspects dropzone identifiers (column id or "{containerId}_TAB_{tabId}") and mutates ColumnId / ParentControlId / ParentTabId accordingly.
- Selection state is managed with an enum (ElementSelection) and _selectedId; selecting an element opens the properties drawer and binds fields via @bind-Value/@bind-NullableValue.
- Preview mode renders each control type directly (sample values in ControlModel.BoolValue / NumberValue / StringValue) but does not submit a composed form via EditForm.
- ExportJson/ImportJson use System.Text.Json to serialize/deserialize the FormModel for copy/paste or persistence.
## Styling
- MudBlazor components provide base styling and theming; page toggles a local _darkTheme flag to switch color classnames.
- Tailwind-style utility classes are used throughout (flex, grid, gap-*, p-*, min-w-*, grid-cols-12) for layout and spacing.
- A small custom CSS file (app.css) contains dark-mode overrides for MudTabs (.mud-tabs-dark).
- Responsiveness relies on CSS grid column classes in preview and flexible widths with computed CanvasStyle to account for pinned drawers.
## Reuse steps
1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()).
2. Include MudBlazor CSS and the provided app.css in the project (wwwroot) and import them in index.html/_Host.
3. Copy DataModel.cs models and the FormBuilderPage.razor UI into a Pages or Components folder.
4. Wire MudBlazor namespaces (using MudBlazor) and ensure MudDropContainer/DropZone types are available in the project.
5. Hook persistence or server APIs to save/load the serialized JSON (ExportJson/ImportJson) and adjust FormModel to match backend DTOs.
## Limitations & next steps
- This is a single client page generated by Instruct UI and demonstrates UI behavior only; it does not include server persistence, authentication, or multi-user state.
- The preview rendering uses component instances for display only and does not create a runtime EditForm for submitting composed forms; adding EditForm + DataAnnotationsValidator is required to validate and submit user-entered data.
- Validation metadata lives on ControlModel but is not integrated into a centralized validation pipeline; extend ApplyValidationSample and hook validation into runtime forms.
- Sample chart and grid data are static; replace with real datasets or bind to services for dynamic previews.
- Consider persisting templates to a database, adding permission checks, and mapping the assembled model to runtime form rendering components for production use.